section.blog {

	.post {
		padding-top: 35px;
		padding-bottom: 60px;
		.clearfix();

		@media screen and (max-width: @screen-sm-min){
			padding-top: 30px;
			padding-bottom: 0;
		}

		&.first-post {
			padding-top: 0;
		}

		.post-image {
			@ls: 250px;
			@fs: @font-size-large + 5;

			text-align: center;
			overflow: hidden;
			position: relative;
			display: block;

			a {
				display: block;

				&.post-is-image {

					&:after {
						@s: 96px;

						position: absolute;
						display: block;
						content: '\e80e';
						font-family: 'EntypoRegular';
						font-size: 50px;
						text-align: center;
						line-height: @s;
						text-align: center;
						top: 50%;
						left: 50%;
						margin-left: -@s/2;
						margin-top: -@s/2;
						background: fade(#fff, 35%);
						color: fade(#fff, 60%);
						.opacity(0);
						.border-radius(50%);
						.size(@s);
						.transition(~"all 250ms");
					}

					&:hover:after {
						.opacity(.8);
					}
				}
			}

			img {
				position: relative;
				width: 100%;
				height: auto;
			}

			.thumb-hover {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: @secondary-color;
				display: block;
				.opacity(0);
				.transition(~"all 550ms");
			}

			em {

				display: block;
				position: absolute;
				left: 50%;
				top: 50%;
				color: #fff;
				margin-left: -@ls/2;
				font-style: normal;
				font-size: @fs;
				text-align: center;
				margin-top: 20px;
				text-transform: uppercase;
				width: @ls;
				.opacity(0);
				.transition(~"all 300ms");

				&:after {
					display: block;
					position: absolute;
					left: 50%;
					height: 3px;
					background: #fff;
					content: '';
					width: 0%;
					bottom: -20px;
					overflow: hidden;
					.transition(~"all 200ms");
				}
			}

			&:hover {

				.thumb-hover {
					@ds: 20px;

					.opacity(.4);
					left: @ds;
					right: @ds;
					top: @ds;
					bottom: @ds;
				}

				em {
					margin-top: -@fs/2;
					.opacity(1);

					&:after {
						width: 100%;
						margin-left: -50%;
						bottom: -10px;
					}
				}
			}

			.post-is-video {

				&:after {
					@s: 96px;

					position: absolute;
					display: block;
					content: '\25B6';
					font-family: 'EntypoRegular';
					font-size: 60px;
					text-indent: 15px;
					text-align: center;
					line-height: @s;
					text-align: center;
					top: 50%;
					left: 50%;
					margin-left: -@s/2;
					margin-top: -@s/2;
					background: fade(#fff, 35%);
					color: fade(#fff, 60%);
					.opacity(0);
					.border-radius(50%);
					.size(@s);
					.transition(~"all 250ms");
				}

				&:hover:after {
					color: fade(#fff, 70%);
					.opacity(.8);
				}
			}
		}

		.post-content {
			font-size: 15px;
			line-height: 20px;

			p {
				font-size: 15px;
				line-height: 25px;
				margin-bottom: 20px;

				b,strong {
					color: @menu-color;
					font-weight: 400;
				}
			}

			.read-more {
				display: block;
				color: @menu-color;
				margin: 20px 0;
				font-size: 14px;

				&:after {
					content: " »";
				}

			}

			.title {
				margin: 0;
				margin-bottom: 30px;
				font-size: 36px;

				@media screen and (max-width: @screen-sm-min){
					font-size: 25px;
				}

				small {
					margin-top: 25px;
					line-height: 1.4;
				}

				a {
					color: @menu-color;
				}
			}

			.post-pagination {
				margin-top: 30px;
				text-align: center;
			}
		}
		
		.post-prev-next {
			margin-top: @base-margin + @base-padding;
			
			.post-next {
				text-align: right;
				
				@media screen and (max-width: @screen-sm-min){
					text-align: left;
					margin-top: @base-margin;
				}
			}
			
			a {
				display: block;
				.text-overflow();
			}
		}

		&.has-post-thumbnail .title {
			margin-top: 60px;

			@media screen and (max-width: @screen-sm-min){
				margin-top: 30px;
			}
		}

		&.no-thumbnail .title {
			margin-top: 0;
		}

		.comments {
			padding-top: 25px;

			.title {
				//border-bottom: 1px solid @border-color;
				font-size: 35px;
				padding-bottom: 40px;
				border-bottom: 1px solid @border-color;

				.replied-to {
					color: @menu-color;
					font-weight: 400;
				}

				@media screen and (max-width: @screen-sm-min){
					font-size: 25px;
					padding-bottom: 10px;
				}
			}

			.comment {
				position: relative;
				padding: 30px 0;
				border-bottom: 1px solid @border-color;
				padding-left: 90px;


				&.depth-1 {
					padding-top: 50px;
					padding-bottom: 50px;
				}

				@media screen and (max-width: @screen-sm-min){
					@sm-screen-padding: 20px;

					padding-top: @sm-screen-padding;
					padding-bottom: @sm-screen-padding;

					&.depth-1 {
						padding-top: @sm-screen-padding;
						padding-bottom: @sm-screen-padding;
					}
				}

				.reply,
				.comment-reply-link {
					color: @menu-color;
					text-transform: uppercase;
					font-size: 12px;
				}


				h4 {
					margin: 0px;
					margin-bottom: 20px;
					color: @menu-color;
					font-size: 18px;

					small {
						margin-top: 5px;
						font-size: 12px;
					}
				}

				.avatar {
					display: block;
					position: absolute;
					left: 0px;

					img {
						.border-radius(150px);
						.size(60px);
					}
				}

				+ .comment-respond {
					padding: @base-margin;
					border-top: 1px solid @border-color;
					border-bottom: 1px solid @border-color;
					background: #fafafa;
					position: relative;
					margin-bottom: @base-margin;
					margin-top: -1px;

					#reply-title {
						display: none;
					}

					#cancel-comment-reply-link {
						position: absolute;
						top: 0;
						right: 0;
						padding: @base-margin;
						text-transform: uppercase;
						&:extend(.heading-font);
					}

					#submit {
						margin-right: 0;
					}

					&:after {
						width: 0;
						height: 0;
						border-style: solid;
						border-width: 0 6px 6px 6px;
						border-color: transparent transparent darken(@border-color, 10%) transparent;
						content: '';
						display: block;
						position: absolute;
						top: 0;
						left: 50%;
						margin-top: -7px;
						margin-left: -3px;
					}

					.title {
						margin: 0;
						font-size: 25px;
					}
				}
			}

			.reply-form {
				margin-top: @base-padding;

				&.user-logged-in {

					form {
					}

					.title {
						margin-bottom: 30px;
					}

					#submit {
						margin-right: 0;
					}
				}
			}

			.pagination {
				margin-top: @base-margin * 2;
			}

			.comment-respond {
				font-weight: 300;

				form {
					.clearfix();
				}

				.title {
					margin: 60px 0;
					border-bottom: 0px;
					margin-bottom: 35px;

					small {
						margin-top: 5px;
					}
				}

				.form-control {
					background: #EEE;

					&:focus, &:hover {
						.box-shadow(none);
						border-color: #EEE;
					}
				}

				label {
					font-weight: 300;
					font-size: 14px;
					text-transform: uppercase;
					&:extend(.heading-font);
				}

				textarea {
					min-height: 130px;
					max-height: 300px;
					margin-bottom: 30px;
				}

				.logged-in-as {

					@media screen and (min-width: @screen-sm-min){
						//padding: 0 15px;
					}
				}

				#submit {
					float: right;
					margin-top: @default-padding;
					color: #fff;
					padding: @base-padding/2 @default-padding;
					.btn;
					.btn-primary;

					margin-right: 15px;
				}
			}

		}

		.author-post {
			margin-top: 50px;
			.clearfix();

			.author-img {
				float: left;

				img {
					display: block;
					line-height: 1;
					.border-radius(50%);

					@media screen and (max-width: @screen-sm-min) {
						width: 80px;
						height: auto;
					}
				}
			}

			.author-description {
				padding-left: 130px;

				@media screen and (max-width: @screen-sm-min) {
					padding-left: 100px;
				}

				.author-name {
					display: block;
					margin-bottom: @base-padding;
					font-size: @font-size-h4;
				}
			}
		}
	}

	.pagination {
		margin-bottom: @base-margin * 2;
	}

	&.blog-sidebar {
		margin-top: 30px;

		@media screen and (max-width: @screen-sm-min){
			margin-left: @base-margin;
			margin-right: @base-margin;
		}

		.pagination {
			margin-bottom: 30px;
		}
	}

	&.blog-sidebar-left {

		@media screen and (min-width: @screen-sm-min){

			.blog-posts {
				float: right;
			}

			.sidebar {
				//float: left;
			}
		}
	}

	.post-password-form {

		label {
			text-transform: uppercase;
			font-weight: 300;
			&:extend(.heading-font);
		}

		input[type="password"] {
			margin: 0 @base-padding/2;
			border: 1px solid @border-color;
			padding-left: @base-padding;
			padding-right: @base-padding;
			font-family: @font-family-base;
			outline: 0;
		}

		input[type="submit"] {
			.btn-primary();

			@padd: 1px;
			padding-top: @padd;
			padding-bottom: @padd;
		}
	}
}




// Post Share
.share-post {
	margin-top: 30px;

	h3 {
		font-size: @font-size-h4 - 2;
		margin-right: @base-padding/2;
	}

	h3, .share-post-links {
		display: inline-block;
	}
}

.share-post-links {
	position: relative;
	top: -1px;

	a {
		display: inline-block;
		padding: 2px 10px;
		//background: #fafafa;
		margin-right: 2px;
		//font-size: @font-size-small;
		//text-transform: uppercase;

		&:hover {
			text-decoration: none;
		}

		&.facebook:hover { color: #fff; background-color: #3b5998; }
		&.twitter:hover { color: #fff; background-color: #55acee; }
		&.pinterest:hover { color: #fff; background-color: #cc2127; }
		&.linkedin:hover { color: #fff; background-color: #0976b4; }
		&.gplus:hover { color: #fff; background-color: #dd4b39; }
		&.tumblr:hover { color: #fff; background-color: #35465c; }
		&.vkontakte:hover { color: #fff; background-color: #45668e; }
		&.email:hover { color: #fff; background-color: #fdbb30; }
	}
}


.single-attachment {

	.attachment-title {
		margin-top: 0;
		margin-bottom: @base-margin;
	}

	.attachment-img {
		background: #fafafa;
		text-align: center;
		display: block;

		img {
			max-width: 100%;
		}
	}

	dl {
		margin-top: @base-margin;
		margin-bottom: 0;

		dt {
			margin-top: @default-padding;
		}

		dd {
			margin-bottom: 0;
		}
	}
}